<template>
  <div class="LoginForm">
    <n-form :label-width="80" :model="formValue" :rules="rules" :size="size" :span="20" ref="formRef">
      <n-form-item label="学号" path="user.number" label-align="left">
        <n-input v-model:value="formValue.user.number" placeholder="输入学号" class="login_number"/>
      </n-form-item>
      <n-form-item label="密码" path="user.password">
        <n-input type="password" show-password-toggle placeholder="输入密码" v-model:value="formValue.user.password"
                 class="login_password"/>
      </n-form-item>
      <n-form-item>
        <n-row :gutter="[0, 24]">
          <n-col :span="24">
            <div style="display: flex; justify-content: space-evenly;">
              <n-button @click="handleValidateClick" color="#169bd5" size="large" round type="success">
                登录
              </n-button>
              <n-button @click="cancleNumber" color="#169bd5" size="large" round type="primary">
                重置
              </n-button>
            </div>
          </n-col>
        </n-row>
      </n-form-item>
    </n-form>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
// import { validateEMail } from '../static/validate'
import { useMessage } from 'naive-ui'

export default defineComponent({
  setup (props, { emit }) {
    const formRef = ref(null)
    // const valueRef = ref('')
    const message = useMessage()
    const formValue = ref({
      user: {
        number: '',
        password: '',
        email: ''
      }
    })
    return {
      formRef,
      formValue,
      rules: {
        user: {
          number: {
            required: true,
            message: '请输入学号',
            trigger: 'blur'
          },
          password: {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          email: {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }
        }
      },
      cancleNumber (e) {
        // eslint-disable-next-line no-undef
        formValue.value.user.number = ''
        // eslint-disable-next-line no-undef
        formValue.value.user.password = ''
      },
      handleValidateClick (e) {
        formRef.value.validate((errors) => {
          if (!errors) {
            emit('user', formValue.value.user)
            message.success('登录成功！')
            // alert('submit!')
          } else {
            console.log(errors)
            message.error('登录失败！')
            // alert('error submit!!')
            return false
          }
        })
      }
    }
  }
})
</script>
<style>
  .LoginForm {
  }

  .login_number, .login_password {
    border-radius: 30px;
    background-color: #f2f2f2;
  }
</style>
